接下來快速回顧一下常用的陣列方法

array method(map/forEach/filter)

.map()

會回傳一個將原陣列傳進 callback function 而產生的新陣列
不會修改到原始陣列的值

let orginalArr = ["apple", "banana", "orange", "grape"];

let newArray = orginalArr.map(function (currentVal, index) {
  let obj = { fruitName: currentVal, index: index };
  console.log(index);
  return obj;
});

console.log(newArray); // map 出新的 array
console.log(orginalArr); // 原始的 array 沒有被修改

.forEach()

將陣列中的值都傳進指定 function 中執行一次
return 的值為 undefined

Array.from()

從類陣列或可迭代（iterable）的物件中產生新的陣列實體

let orginalArr = ["apple", "banana", "orange", "grape"];

let listItem = document.getElementsByClassName('list_item')
let listItemArr = Array.from(listItem); // 從 HTMLCollection 產生陣列

// 把 orginalArr 全部傳進 callback function 中執行一次
let forEachResult = orginalArr.forEach(function (currentVal, index) {
  let obj = { fruitName: currentVal, index: index };
  console.log(index);
  listItemArr[index].innerHTML = `<span>fruitName:
  ${currentVal} , index: ${index}</span>`;
});

console.log(forEachResult); // return value is undefined

.filter()

從原陣列篩出符合特定指定條件的值，並回傳新陣列

const orginalArr = ["apple", "banana", "orange", "grape"];
let filterArr = orginalArr.filter((currentVal)=> currentVal.length>5); // 篩出陣列中長度大於5的值
console.log(filterArr); // ["banana","orange"]

.slice()

將原陣列從開始索引值複製到結束索引值
結束索引值如果是-1 表示切到陣列尾端倒數第一位
為shallow copy，不改變原始陣列

let orginalArr = ["apple", "banana", "orange", "grape"];
let sliceArr = orginalArr.slice(1, orginalArr.length) // 從[1]開始切 切到 orginalArr.length 為止

來個簡表比較一下

如果喜歡圖像比較，也可以參考這類型的圖表
圖片引用自 reddit

arrow function

箭頭函式相對於傳統函式較為精簡的寫法
如果只 return 單一值，則可以省略掉 {}

let helloArrow = (name) => console.log("hello " + name);

let helloTraditional = function (name){
  console.log('hello '+name);
}

helloArrow("Kaytie"); // "hello Kaytie"
helloTraditional('Barbie'); "hello Barbie"

要特別注意的是，箭頭函式沒有自己的 this ，其 this 的值來自於箭頭函式外
所以箭頭函示 不適合做為 object method 使用
traditional function

let doggy = {
  dogName: 'Lucky',
  bark:function(){
    console.log(this.dogName+' woof! woof!');
  }
}

doggy.bark(); // "Lucky woof! woof!"

arrow function 如果作為 object method 來使用，因為本身沒有 this 值的關係
this 會變成 window object
導致 undefined

let doggy = {
  dogName: 'Lucky',
  bark:()=>{
    console.log(this.dogName+' woof! woof!'); // 這裡的 this 會是 window object
  }
}

doggy.bark(); // "undefined woof! woof!"

那如果就是想將 arrow function 作為object method來使用呢XD
不要用 this 就可以了(小聲
(但其實用傳統函式來寫就ok啦

let doggy = {
  dogName: 'Lucky',
  bark:()=>{
    console.log(doggy.dogName+' woof! woof!'); // 不要用 this
  }
}

doggy.bark(); // "Lucky woof! woof!"

明天終於要回到 react 的部分啦~加油加油！

參考資料

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
https://www.freecodecamp.org/news/top-javascript-concepts-to-know-before-learning-react/
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions#%E5%9F%BA%E6%9C%AC%E8%AA%9E%E6%B3%95

https://stackoverflow.com/questions/26052699/array-from-vs-array-prototype-map